<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.borrowBack')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('loanAfterManage.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item >{{$t('operationList.crumbsTwo')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('operationList.no1')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail">
        <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('loanMoney.orderDetail')" name="first">
                <orderdetail></orderdetail>
            </el-tab-pane>
            <el-tab-pane :label="$t('userList.userInfo')" name="second">
                <userdetail></userdetail>
            </el-tab-pane>
            <el-tab-pane :label="$t('userList.loanLog')" name="third">
                <loanrecord></loanrecord>
            </el-tab-pane>
            <el-tab-pane :label="$t('new.no96')" name="fourth">
                <orderapprove></orderapprove>         
            </el-tab-pane>
            <el-tab-pane :label="$t('serviceManage.telRmind')" name="five">
                <phonelist></phonelist>
                <historyphone></historyphone>
            </el-tab-pane>
            <el-tab-pane :label="$t('operationList.no1')" name="six">
                <collectionlist></collectionlist>
                <div style="padding:20px;" v-if="collection==1">
                    <el-tabs v-model="activeCollection">
                        <el-tab-pane :label="$t('operationDetail.tab3.no1')" name="phone"></el-tab-pane>
                        <el-tab-pane :label="$t('operationDetail.tab3.no2')" name="ms"></el-tab-pane>
                        <el-tab-pane :label="$t('operationDetail.tab3.no3')" name="apply"></el-tab-pane>
                    </el-tabs>
                    <el-row :gutter="20">
                        <el-col :span="12" v-show="activeCollection=='phone'||activeCollection=='ms'">
                            <el-tabs v-model="activePhone" type="border-card" @tab-click="phoneClick">
                                <el-tab-pane :label="$t('operationDetail.tab2.no1')" name="1"></el-tab-pane>
                                <el-tab-pane :label="$t('operationDetail.tab2.no2')" name="2"></el-tab-pane>
                                <el-tab-pane :label="$t('operationDetail.tab2.no3')" name="3"></el-tab-pane>
                            </el-tabs>
                            <el-table :data="phoneData"  max-height="400" border style="width: 100%">
                                <el-table-column  :label="$t('operationDetail.no46')" width="50px;">
                                    <template  slot-scope="scope">
                                        <el-radio :label="scope.row" v-model="phoneVal">&nbsp;</el-radio>
                                    </template>
                                </el-table-column>
                                <el-table-column  prop="name" :label="$t('public.name')"></el-table-column>
                                <el-table-column  prop="relationship" :label="$t('public.no17')"></el-table-column>
                                <el-table-column  prop="phone" :label="$t('public.userTel')"></el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="12">
                            <div v-if="activeCollection=='phone'">
                                <el-alert :title="$t('long.no16')" show-icon type="warning"></el-alert>
                                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm mt20">
                                    <el-form-item :label="$t('operationDetail.no23')" prop="status">
                                    <el-select v-model="ruleForm.status" :placeholder="$t('public.placeholder')">
                                        <el-option v-for="item in options1" :key="item.value" :label="$t(item.label)" :value="item.value">
                                        </el-option>
                                    </el-select>
                                    </el-form-item>
                                    <el-form-item :label="$t('operationDetail.no24')" prop="promise">
                                    <el-radio-group v-model="ruleForm.promise">
                                        <el-radio :label="1">
                                        <span>{{$t('operationDetail.no11')}}</span>
                                        </el-radio>
                                        <el-radio :label="0">
                                        <span>{{$t('operationDetail.no12')}}</span>
                                        </el-radio>
                                    </el-radio-group>
                                    </el-form-item>
                                    <template v-if="ruleForm.promise == 1">
                                    <el-form-item :label="$t('operationDetail.no26')" prop="promiseTime">
                                        <el-col :span="11">
                                            <el-date-picker 
                                            type="date" 
                                            value-format="yyyy-MM-dd" 
                                            :placeholder="$t('operationDetail.no27')" 
                                            v-model="ruleForm.promiseTime">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    </template>        
                                    <el-form-item :label="$t('public.no38')">
                                    <el-input type="textarea" v-model="ruleForm.remark" :rows="4" maxlength="600"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">{{$t('operationDetail.no22')}}</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div v-if="activeCollection=='ms'">
                                <el-alert :title="$t('long.no16')" show-icon type="warning"></el-alert>
                                <div class="mt20">
                                    <template v-if="collectionSmsTemplate">
                                    <el-radio-group v-model="templateId" class="radio1">
                                        <el-radio v-for="(item,index) in collectionSmsTemplate" :key="index" :label="item.id">
                                        <span style="word-break:break-all">{{item.fieldTypeName}}</span>
                                        </el-radio>
                                    </el-radio-group>
                                    </template>
                                    <div v-else style="padding:0 30px">
                                    {{$t('public.no23')}}
                                    </div>
                                </div>
                                <el-row type="flex" justify="center">
                                    <el-col :span="3" class="mt20">
                                    <el-button type="primary" @click="noteSubmit">{{$t('operationDetail.no25')}}</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                            <div v-if="activeCollection=='apply'">
                                <el-form :model="applyForm" :rules="applyrules" ref="applyForm" label-width="120px" class="mt20">
                                    <el-form-item :label="$t('operationDetail.no47')">
                                        <span>{{waitAmount}}{{$store.state.common.vi_currency}}</span>
                                        <!-- <span>0</span> -->
                                    </el-form-item>
                                    <el-form-item :label="$t('operationDetail.no48')" prop="amount">
                                      <el-input type="text" v-model.number="applyForm.amount">
                                        <template slot="append">{{$store.state.common.vi_currency}}</template>
                                      </el-input>
                                    </el-form-item>
                                    <el-form-item :label="$t('public.no38')" prop="remark">
                                      <el-input type="textarea" v-model="applyForm.remark" :rows="4" maxlength="600"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                      <el-button type="primary" @click="applySubmit('applyForm')">{{$t('public.no41')}}</el-button>
                                    </el-form-item>
                                </el-form>>
                            </div>
                        </el-col>
                    </el-row>
                </div>  
            </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>
<script>
import orderdetail from 'src/components/component/OrderDetail'
import userdetail from 'src/components/component/UserDetail'
import loanrecord from 'src/components/component/LoanRecord'
import orderapprove from 'src/components/component/OrderApprove'
import phonelist from 'src/components/component/Phonelist'
import historyphone from 'src/components/component/HistoryPhone'
import collectionlist from 'src/components/component/CollectionList'

export default {
  components: {
    orderdetail,
    userdetail,
    loanrecord,
    orderapprove,
    phonelist,
    historyphone,
    collectionlist,
  },
  data () {
    let checkAmount = (rule, value, callback) => {
        if (value==='') {
          callback(new Error(this.$t('public.no88')));
        }else if ((!Number.isInteger(value))||value<0) {
          callback(new Error(this.$t('operationDetail.no49')));
        }else if (value > this.$route.query.waitAmount) {
          callback(new Error(this.$t('operationDetail.no50')));
        } else {
          callback();
        }
    };
    return {
        orderId:this.$route.query.orderId,
        userId:this.$route.query.userId,
        waitAmount:this.$route.query.waitAmount,
        collection:this.$route.query.collection,
        flag: true,
        activeName: 'first',
        activeCollection: 'phone',
        activePhone:'1',
        phoneVal:'',
        templateId:'',
        phoneData:[],
        collectionSmsTemplate:[],
        ruleForm: {// 电话催收模块
            status: '',
            promise: '',
            promiseTime: '',
            remark: ''
        },
        options1: this.$store.state.options.collection_option_submit, // 电话接通状态下拉选框信息
        rules: {// 电话催收表单验证项
            status: [
            { required: true, message: this.$t('operationDetail.no20'), trigger: 'change' }
            ],
            promise: [
            { required: true, message: this.$t('operationDetail.no21'), trigger: 'change' }
            ],
            promiseTime: [
            { required: true, message: this.$t('operationDetail.no27'), trigger: 'change' }
            ],
        },
        applyForm:{// 部分还款表单
            amount:'',
            remark:''
        },
        applyrules:{
          amount: [
            { validator: checkAmount, trigger: 'blur' }
          ]
        }   
    }
  },
  methods:{
    phoneClick(tab, event) {//获取通讯录列表
        this.phonelist(tab.name);
    },
    phonelist(tab){
      let option = {
            param: {
                adminId:this.userId,
                status:tab
            }       
        }
        this.$axios.post(this.$action.collection_phonelist, option).then(res => {
            if (res.code == 200) {
                this.phoneData=res.data;
            }else{
                this.$globalMsg.error(res.message)
            }
        })
    },
    smsTemplate() {//获取短信模板
        let option = {
            pageNum:1,
            pageSize:10,
            param: {}       
        }
        this.$axios.post(this.$action.collection_smsTemplate, option).then(res => {
            if (res.code == 200) {
                this.collectionSmsTemplate=res.data;
            }else{
                this.$globalMsg.error(res.message)
            }
        })
    },
    submitForm (formName) { // 电话催收提交操作
        if (this.phoneVal === '') {
           this.$globalMsg.error(this.$t('operationDetail.no28'));
            return
        }
      // 然后表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.ruleForm.promise == 1 && this.ruleForm.promiseTime == '') {
            this.$globalMsg.error(this.$t('operationDetail.no27'));
            return
          }
          if (this.flag) {
            this.flag = false
            let option = {
              param: {
                orderId: this.orderId,
                urgent: this.activePhone,
                contactName:this.phoneVal.name,
                contactPhone:this.phoneVal.phone,
                relationship:this.phoneVal.relationshipCode,
                businessId:this.phoneVal.businessId,
                ...this.ruleForm
              },
            }
            this.$axios.post(this.$action.collection_callSubmit, option).then(res => {
              this.flag = true
              if (res.code == 200) {
                this.$globalMsg.success(this.$t('message.success'));
                setTimeout(() => {
                  this.$router.push('/mycollectionlist');
                }, 2000)
              } else {
                this.$globalMsg.error(res.message);
              }
            })
          }
        }
      })
    },
    noteSubmit () { // 短信模版发送
      if (this.phoneVal === '') {
        this.$globalMsg.error(this.$t('operationDetail.no28'));
        return
      }
      if (this.templateId === '') {
        this.$globalMsg.error(this.$t('operationDetail.no29'));
        return
      }
      if (this.flag) {
        this.flag = false;
        let option = {
            param:{
                orderId: this.orderId,
                urgent: this.activePhone,
                name:this.phoneVal.name,
                phone:this.phoneVal.phone,
                businessId:this.phoneVal.businessId,
                relationship:this.phoneVal.relationshipCode,
                templateId: this.templateId
            }
        }
        this.$axios.post(this.$action.collection_smsSend, option).then(res => {
          this.flag = true
          if (res.code == 200) {
            this.$globalMsg.success(this.$t('message.success'));
            setTimeout(() => {
              this.$router.push('/mycollectionlist');
            }, 2000)
          } else {
            this.$globalMsg.error(res.message);
          }
        })
      }
    },
    applySubmit(formName){// 逾期减免提交
      this.$refs[formName].validate((valid) => {
          if (valid) {  
            if (this.flag) {
              this.flag = false
              let option = {
                param:{
                  orderId:this.orderId,
                  ...this.applyForm
                }
              }
              this.$axios.post(this.$action.collection_deduction, option).then(res => {
                this.flag = true;
                if (res.code == 200) {
                  this.$globalMsg.success(this.$t('message.success'))
                  setTimeout(() => {
                    this.$router.push('/mycollectionlist');
                  }, 2000)
                } else {
                  this.$globalMsg.error(res.message)
                }
              })
            }
        } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    getwaitAmount(){
      let option = {
          param: {
              orderId:this.orderId,
          }       
      }
      this.$axios.post(this.$action.collection_reduce, option).then(res => {
          if (res.code == 200) {
              this.waitAmount = res.data.maxReduceAmount;
          }else{
              this.$globalMsg.error(res.message)
          }
      })
    }
  },
  mounted(){
    this.phonelist(1);
    this.smsTemplate();
    this.getwaitAmount();
  }
}
</script>
<style lang="scss">
.detail{
    background:#fff;
    padding:0 20px;
    font-size: 14px;
}
.title{
    color: #1D7BFF;
    font-weight: bold;
    font-size: 14px;  
}
.el-tabs--border-card>.el-tabs__content {
    padding: 0px;
}
</style>